<template>
	<ScaleScreen :width="1920" :height="1080" class="scale-wrap"
		:selfAdaption="$store.getters.isScale"
		:fullScreen="false">
		<div class="bg">
			<div v-if="loading">Loading...</div>
			<div v-else class="host-body">
				<!-- 头部 s -->
				<div class="header-wrap">
          <div>Title</div>
					<div v-if="!isHome" class="returnHome" @click="onClickHome"><i class="el-icon-arrow-left"></i>返回首页</div>
				</div>

				<!-- 内容  s-->
        <div class="main-wrap">
          <router-view></router-view>
        </div>

        <!-- 底部 -->
        <div class="footer-warap"></div>
			</div>
		</div>
	</ScaleScreen>
</template>

<script>
import ScaleScreen from './components/scaleScreen.vue';
export default {
	components: { ScaleScreen },
	data() {
		return {
			loading: true,
		};
	},
	computed:{
		isHome(){
			return this.$route.name=="cockpitHome"
		}
	},
	created() {

		let timer = setTimeout(() => {
			this.loading = false;
			clearTimeout(timer);
		}, 500); //页面自适应缩放需要500时间的
	},

	methods: {
		onClickHome(){
			this.$router.push("/cockpitHome")
		}
	}
};
</script>

<style lang="scss" scoped>
$header-height: 87px;
$footer-height: 52px;
.scale-wrap {
	color: #FFFFFF;
	overflow: hidden;
	.bg {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgba(23, 33, 47, 1);

	}

	.host-body {
		width: 100%;
		height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: url("./assets/body-background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

		.header-wrap {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

			background-image: url('./assets/header.png');
			background-size: 100% 100%;			
      height: $header-height;
			z-index: 10;
		}
    .main-wrap{
      width: 100%;
      height: 1px; //calc( 100% - $header-height - $footer-height );
      flex:1;
    }
    .footer-warap {
    	background-image: url("./assets/footer.png");
    	background-size: 100% 100%;
    	background-repeat: no-repeat;    	
      height: $footer-height;
    	z-index: 10;
    }
	}
}
</style>
